<#assign pageTitle = "我的订单" />
<#assign pageHeader>
	<script type="text/javascript" src="/static/js/order.js?v=1"></script>
	<script type="text/javascript" src="/static/js/wxJSAPI.js?v=1"></script>
	<link rel="stylesheet" type="text/css" href="/static/css/qrcode-dialog.css"/>
	<link rel="stylesheet" type="text/css" href="/static/qdxwx/css/reset.css"/>
	<script type="text/javascript" src="/static/libs/jquery/jquery-3.6.0.min.js"></script>
	<style>
		.u-ol-pic{
			max-height: 110px;
		}
	</style>
	<script type="text/javascript">
		$(function () {
			$("#a-${queryOrder.status!}").addClass("current");
			$("#mobileSelect${queryOrder.status!}").addClass("m-current");
		});
		//取消课程
		function cancelOrder(orderId) {
			layer.confirm('订单取消后将关闭订单，不能再重新支付，确认取消订单吗？', {
				btn: ['我再想想', '取消订单'] //按钮
			}, function () {
				layer.closeAll();
			}, function () {
				$.ajax({
					url: "/user/order/cancel.json",
					data: {"orderId": orderId},
					type: "post", dataType: "json",
					success: function (json) {
						if (json.code === 0) {
							return layer.msg("恭喜您，订单取消成功！", {time: 1000}, function () {
								window.location.reload();
							});

						} else {
							return layer.msg(json.msg);
						}
					}
				})
			});
			return false;
		}
	</script>
</#assign>
<#assign pageContent>
	<article class="w80 fl">
		<div class="u-r-cont">
			<section>
				<div class="">
					<section class="u-r-tit-all clearfix">
						<h2 class="unFw m-xl-ashow">
							<a href="/user/order/list.html" id="a-">全部订单</a>
							<a href="/user/order/list.html?state=SUCCESS"  id="a-SUCCESS" >已完成</a>
							<a href="/user/order/list.html?state=INIT"  id="a-INIT" >未完成</a>
							<a href="/user/order/list.html?state=CANCEL"  id="a-CANCEL" >已取消</a>
							<a href="/user/order/list.html?state=REFUND"  id="a-REFUND" >已退款</a>
						</h2>
					</section>
					<section class="orde-tab-new u-r-all-box">
						<div class="o-tab-n-body">
							<#if !orderList??>
								<!-- /无数据提示 开始-->
								<section class="no-data-wrap">
									<em class="icon30 no-data-ico">&nbsp;</em>
									<span class="c-666 fsize14 ml10 vam">您还没有购买过课程！</span>
								</section>
								<!-- /无数据提示 结束-->
							</#if>
							<div>
								<div class="u-order-wrap">
									<#list orderList as order>
										<dl>
											<dt class="clearfix">
												<span class="c-999 fsize14 fl"><tt class="f-fM">订单号：</tt><tt class="f-fM c-666">${order.orderNo}</tt></span>
												<span class="c-999 fsize14 fl ml20">
												<#if (order.vmAmount+order.backAmount) gt 0>
													（账户支付<font class="c-master">￥${(order.vmAmount+order.backAmount)/100}</font>，
													在线支付<font class="c-master">￥${order.cashAmount/100}</font>）
												</#if>
											</span>
												<span class="fr u-o-dt-time">
												<tt class="f-fM">${order.createTime?string("yyyy-MM-dd HH:mm")}</tt>
											</span>
											</dt>
											<!--未支付订单样式-->
											<#if order.status=='INIT'>
												<dd class="u-order-list">
													<section class="w50 disIb vam u-o-left" style="max-width: 430px">
														<div class="mr30 u-o-l-infor">
															<#list order.orderDetailList as detail>
																<div class="c-cou-item">
																	<div class="">
																		<div>
																			<a
																					<#if order.orderType=='COURSE'>
																						href="/course/view/${detail.courseId!}.html"
																						<#elseif order.orderType=='BOOK'>
																							href="/book/view/${detail.courseId!}.html"
																						<#elseif order.orderType=='PICTURE'>
																							href="/picture/view/${detail.courseId!}.html"
																					</#if>
																					title="" class="u-ol-pic">
																				<#if order.orderType=='ACCOUNT'>
																					<img src="/static/images/order-account.jpg" alt="">
																				<#else>
																					<#if detail.courseImgUrl??>
																						<img src="${staticSite}${detail.courseImgUrl}" alt="">
																					<#else>
																						<img src="${order.imgUrl!}" alt="">
																					</#if>
																				</#if>
																			</a>
																			<h6 class="hLh30 txtOf name">
																				<a
																						<#if order.orderType=='COURSE'>
																							href="/course/view/${detail.courseId!}.html"
																						<#elseif order.orderType=='BOOK'>
																							href="/book/view/${detail.courseId!}.html"
																						<#elseif order.orderType=='PICTURE'>
																							href="/picture/view/${detail.courseId!}.html"
																						<#elseif order.orderType=='DOCUMENT'>
																							href="/document/view/${detail.courseId!}.html"
																						</#if>
																						title="" class="fsize14 c-666">
																					<#if (detail.sellType!'')=='COURSE'>[课程订单]&nbsp;</#if>
																					<#if (detail.sellType!'')=='LIVE'>[直播订单]&nbsp;</#if>
																					<#if (detail.sellType!'')=='PACKAGE'>[套餐订单]&nbsp;</#if>
																					<#if (detail.sellType!'')=='BOOK'>[书籍订单] </#if>
																					<#if (detail.sellType!'')=='PICTURE'>[素材订单] </#if>
																					<#if order.orderType=='MEMBER'>[会员订单]&nbsp;</#if>
																					<#if order.orderType=='ACCOUNT'>[充值订单]&nbsp;</#if>
																					<#if order.orderType=='BOOK'>[书籍订单] </#if>
																					<#if order.orderType=='PICTURE'>[素材订单] </#if>
																					<#if order.orderType=='DOCUMENT'>[资料订单] </#if>
																					${detail.courseName!}
																				</a>
																			</h6>
																			<section class="hLh30 txtOf mt10 u-o-l-jg">
																				<span class="c-master fsize16">￥<font>${detail.price/100}</font></span>
																			</section>
																		</div>
																	</div>
																</div>
															</#list>
														</div>
													</section>
													<section class="disIb vam u-o-maddile w16 tac mb20">
														<div class="disIb vam tac u-o-price">
															<span class="c-999 f-fM fsize14">${order.createTime?string("yyyy-MM-dd HH:mm")}</span>
														</div>
													</section>
													<section class="disIb vam w16 tac mb20 col-2-new" style="width: 250px">
														<div class="disIb vam tac u-o-m-zt">
															<#if order.status=='SUCCESS'>
																<p class="hLh20"><span class="c-green fsize14">购买成功</span></p>
															</#if>
															<#if order.status=='INIT'>
																<span class="c-red fsize14">
															未支付
															</span>
															</#if>
															<#if order.status=='CANCEL'>
																<span class="c-999 fsize14">
															已取消订单
															</span>
															</#if>
															<#if order.status=='REFUND'>
																<span class="c-blue fsize14">
															已退款
															</span>
															</#if>
														</div>
													</section>
													<section class="w16 disIb vam u-o-right">
														<#if order.status=='INIT'>
															<div class="tac u-o-r-btn-infor">
																<p class="c-999 f-fA mb10"><a href="javascript:orderRepay(${order.orderId}, 'wxpay')" class="cou-kscp">重新支付</a></p>
																<p class="mb20"><a href="javascript:cancelOrder(${order.orderId})" class="cou-kscp gmkc">取消订单</a></p>
															</div>
														</#if>
														<#if order.status=='SUCCESS'>
															<#list order.orderDetailList as detail>
																<div class="tac u-o-r-btn-infor">
																	<p class="mb20"><a href="/user/course/comment.html?courseId=${detail.courseId!}" class="layui-btn layui-btn-danger">评价课程</a></p>
																</div>
															</#list>
														</#if>
													</section>
													<div class="clear"></div>
												</dd>
											</#if>
											<!--不是未支付订单样式-->
											<#if order.status!='INIT'>
												<#list order.orderDetailList as detail>

													<dd class="u-order-list">
														<section class="w50 disIb vam u-o-left">
															<div class="mr30 u-o-l-infor">
																<div class="c-cou-item">
																	<div class="">
																		<div>
																			<a <#if order.orderType=='COURSE'>href="/course/view/${detail.courseId!}.html"</#if> title="" class="u-ol-pic">
																				<#if order.orderType=='ACCOUNT'>
																					<img src="/static/images/order-account.jpg" alt="">
																				</#if>
																				<#if detail.courseImgUrl??>
																					<img src="${staticSite}${detail.courseImgUrl}" alt="">
																				<#else>
																					<img src="${order.imgUrl!}" alt="">
																				</#if>
																			</a>
																			<h6 class="hLh30 txtOf name">
																				<a <#if order.orderType=='COURSE'>
																					href="/course/view/${detail.courseId!}.html"
																					<#elseif order.orderType=='BOOK'>
																						href="/book/view/${detail.courseId!}.html"
																					<#elseif order.orderType=='PICTURE'>
																						href="/picture/view/${detail.courseId!}.html"
																					<#elseif order.orderType=='DOCUMENT'>
																						href="/document/view/${detail.courseId!}.html"
																				</#if>
																				   title="" class="fsize14 c-666">
																					<#if order.orderType=='COURSE'>[课程订单]&nbsp;</#if>
																					<#if order.orderType=='LIVE'>[直播订单]&nbsp;</#if>
																					<#if order.orderType=='PACKAGE'>[套餐订单]&nbsp;</#if>
																					<#if order.orderType=='MEMBER'>[会员订单]&nbsp;</#if>
																					<#if order.orderType=='ACCOUNT'>[充值订单]&nbsp;</#if>
																					<#if order.orderType=='BOOK'>[书籍订单] </#if>
																					<#if order.orderType=='PICTURE'>[素材订单] </#if>
																					<#if order.orderType=='DOCUMENT'>[资料订单] </#if>
																					${detail.courseName!}
																				</a>
																			</h6>
																			<section class="hLh30 txtOf mt10 u-o-l-jg">
																				<span class="c-master fsize16">￥<font>${detail.price/100}</font></span>
																			</section>
																		</div>
																	</div>
																</div>

															</div>
														</section>
														<section class="disIb vam u-o-maddile w16 tac mb20">
															<div class="disIb vam tac u-o-price">
																<span class="c-999 f-fM fsize14">${order.createTime?string("yyyy-MM-dd HH:mm")}</span>
															</div>
														</section>
														<section class="disIb vam w16 tac mb20 col-2-new"  style="width: 250px">
															<div class="disIb vam tac u-o-m-zt">
																<#if order.status=='SUCCESS'>
																	<p class="hLh20"><span class="c-green fsize14">购买成功</span></p>
																</#if>
																<#if order.status=='INIT'>
																	<span class="c-red fsize14">
																未完成
																</span>
																</#if>
																<#if order.status=='CANCEL'>
																	<span class="c-999 fsize14">
																已取消订单
																</span>
																</#if>
																<#if order.status=='REFUND'>
																	<span class="c-blue fsize14">
																	已退款
																</span>
																</#if>
															</div>
														</section>
														<section class="w16 disIb vam u-o-right">
															<#if order.status=='SUCCESS'>
																<div class="tac u-o-r-btn-infor">
																	<#if order.orderType=='COURSE'>
																		<p class="mb20"><a href="/user/course/comment.html?courseId=${detail.courseId!}" class="cou-kscp">评价课程</a></p>
																	</#if>
																</div>
															</#if>
														</section>
														<div class="clear"></div>
													</dd>
												</#list>
											</#if>
										</dl>
									</#list>
								</div>
							</div>
							<!-- 公共分页 开始 -->
							<div class="paging" id="showPages"></div>
							<!-- 公共分页 结束 -->
						</div>
					</section>
				</div>
			</section>
		</div>
	</article>
</#assign>
<#assign pageFooter>
	<script type="text/javascript" src="/static/js/page.js"></script>
	<script type="text/javascript">
		var options = {
			currentPage : ${page.currentPage}
			,totalPage : ${totalPages}
		};
		$(function () {
			showPages(options);
		});
	</script>
</#assign>

<#include "../layouts/layout_uc.ftl">
<script type="text/javascript" src="/static/libs/jquery/jquery.qrcode.min.js"></script>